<template>
	<view class="container t-login">
		<uni-section>
			<view class="example">
				<!-- 自定义表单校验 -->
				<uni-forms ref="customForm" label-width="150rpx" label-position="right" :rules="customRules"
					:modelValue="customFormData">
					<uni-forms-item label="电话" required name="Phone">
						<uni-easyinput v-model="customFormData.Phone" :disabled="type==1" placeholder="请输入电话" />
					</uni-forms-item>
					<uni-forms-item label="旧密码" required name="password" v-if="type==1">
						<uni-easyinput type="password" v-model="customFormData.oldPassword" placeholder="请旧输入密码" />
					</uni-forms-item>
					<uni-forms-item label="新密码" required name="password">
						<uni-easyinput type="password" v-model="customFormData.password" placeholder="请输入新密码" />
					</uni-forms-item>
					<uni-forms-item label="确认密码" required name="psw2">
						<uni-easyinput type="password" v-model="customFormData.psw2" placeholder="请再次输入新密码" />
					</uni-forms-item>
					<!-- <uni-forms-item  v-if="type==2"  class="flex"> -->
					<!-- <input type="number" name="code" class="input" maxlength="6" placeholder="请输入验证码" v-model="yzm" />
						<view v-if="showText" class="t-c" @click="getCode()">发送短信</view>
						<view v-else class="t-c" style="background-color: #A7A7A7;">重新发送({{ second }})</view>
						</uni-forms-item> -->
					<!-- </uni-forms-item> -->
				</uni-forms>
				<u-button type="primary" @click="submit('customForm')">{{type!=2?'确定':second==60?'获取验证码':second+'秒后重新获取'}}</u-button>
			</view>
		</uni-section>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog mode="input" :before-close="true"  cancelText="取消" confirmText="确定" title="提示" value=""
				@confirm="dialogInputConfirm" @close="cancel">
				<!-- <u-code v-model="customFormData.phoneCode"></u-code> -->
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>
<script>
	import md5 from '@/common/newMD5.js'
	export default {
		data() {
			return {
				type: 1,
				yzCode:'',
				showText: true,
				second:60,
				// 自定义表单数据
				customFormData: {
					Phone: uni.getStorageSync('userData').phone||'',
					code: "",
					oldPassword:'',
					phoneCode: "",
					psw2: '',
					password: ""
				},
				second: 60,
				// 自定义表单校验规则
				customRules: {
					oldPassword: {
						rules: [{
							required: true,
							errorMessage: '旧密码不能为空'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}]
					},
					Phone: {
						rules: [{
								required: true,
								errorMessage: '电话不能为空'
							},
							{

							}
						]
					},
					psw2: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}]
					},
					phoneCode: {
						rules: [{
							required: true,
							errorMessage: '验证码不能为空'
						}]
					}
				},
			}
		},
		computed: {
			// 处理表单排列切换
			alignment() {
				if (this.current === 0) return 'left'
				if (this.current === 1) return 'top'
				return 'left'
			}
		},
		onLoad(e) {
			this.type = e.type || 1
			console.log(this.type);
		},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			this.$refs.customForm.setRules(this.customRules)
		},
		methods: {
			onClickItem(e) {
				this.current = e.currentIndex
			},
			//获取短信验证码
			getCode() {
				var that = this;
				var interval = setInterval(() => {
					that.showText = false;
					var times = that.second - 1;
					//that.second = times<10?'0'+times:times ;//小于10秒补 0
					that.second = times;
				}, 1000);
				setTimeout(() => {
					clearInterval(interval);
					that.second = 60;
					that.showText = true;
				}, 60000);
				//这里请求后台获取短信验证码
				this.SendAsync()
			},
			// 获取验证码
			SendAsync() {
				let data = {
					phoneNumbers: this.customFormData.Phone,
					code: "1"
				}
				this.$ajax.SendAsync(data).then(res => {
					this.$refs.inputDialog.open()
					this.yzCode = res.verify
				})
			},
			del(id) {
				let index = this.dynamicLists.findIndex(v => v.id === id)
				this.dynamicLists.splice(index, 1)
			},
			cancel() {
				this.$refs.inputDialog.close()
				this.yzCode=''
			},
			dialogInputConfirm(val){
				this.customFormData.phoneCode=val
				if(this.yzCode!=''){
					if(this.type==2&&this.yzCode!=md5(this.customFormData.phoneCode)){
						this.$apis.msg('验证码错误')
						return
					}else {
						this.submit('customForm')
					}
				}else {
					this.$apis.msg('请输入验证码')
					return
				}
			},
			submit(ref) {
				let that = this
				this.$refs[ref].validate().then(res=>{
					if (this.customFormData.psw2 != this.customFormData.password) {
						uni.showToast({
							title: '两次密码不一一致',
							icon: 'none',
							duration: 2000
						})
						return
					}
					if(this.type==2&&this.yzCode==''){
						this.getCode()
					}else {
						this.$refs[ref].validate().then(res => {
							that.$ajax.UpdateUser(this.customFormData).then(res2 => {
								uni.showToast({
									title: '操作成功',
									icon: 'none',
									duration: 2000
								})
								setTimeout(function() {
									uni.reLaunch({
										url:'/pages/home/login/login'
									})
								}, 2000);
								
							})
						}).catch(err => {
							this.cancel()
							console.log('err', err);
						})
					}
				})
				
				
				
				
			},
		}
	}
</script>
<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	.img-a {
		position: absolute;
		width: 100%;
		top: -280rpx;
		right: -100rpx;
	}

	.img-b {
		position: absolute;
		width: 50%;
		bottom: 0;
		left: -50rpx;
		margin-bottom: -200rpx;
	}

	.t-login {
		width: 750rpx;
		margin: 0 auto;
		overflow: hidden;
		font-size: 28rpx;
		color: #000;
	}

	.t-login button {
		font-size: 28rpx;
		background: #5677fc;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
	}

	.input {
		padding: 0 10rpx 0 120rpx;
		height: 70rpx;
		line-height: 90rpx;
		margin-bottom: 50rpx;
		background: #f8f7fc;
		border: 1px solid #e9e9e9;
		font-size: 28rpx;
		border-radius: 50rpx;
	}

	.t-a {
		position: relative;
	}

	.t-a image {
		width: 60rpx;
		height: 40rpx;
		position: absolute;
		left: 40rpx;
		top: 28rpx;
		border-right: 2rpx solid #dedede;
		padding-right: 20rpx;
	}

	.t-login .t-b {
		text-align: left;
		font-size: 46rpx;
		color: #000;
		padding: 300rpx 0 120rpx 0;
		font-weight: bold;
	}

	.t-c {
		position: absolute;
		right: 32rpx;
		top: 390rpx;
		background: #5677fc;
		color: #fff;
		font-size: 24rpx;
		border-radius: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 25rpx;
	}

	.t-login .t-d {
		text-align: center;
		color: #999;
		margin: 80rpx 0;
	}

	.t-login .t-e {
		text-align: center;
		width: 250rpx;
		margin: 80rpx auto 0;
	}

	.t-login .t-g {
		float: left;
		width: 50%;
	}

	.t-login .t-e image {
		width: 50rpx;
		height: 50rpx;
	}

	.t-login .t-f {
		text-align: center;
		margin: 200rpx 0 0 0;
		color: #666;
	}

	.t-login .t-f text {
		margin-left: 20rpx;
		color: #aaaaaa;
		font-size: 27rpx;
	}

	.t-login .uni-input-placeholder {
		color: #000;
	}

	.cl {
		zoom: 1;
	}

	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20';
	}

	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>